<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS Flexbox布局教程 [搬运] | 秋澪冬安</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/assets/img/favicon.ico">
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <script>
            var _hmt = _hmt || [];
            (function () {
                let isLocal = window.location.hostname.includes("localhost");
                if(!isLocal){
                    var hm = document.createElement("script");
                    hm.src = "https://hm.baidu.com/hm.js?2b691637b166e447d963eab55f62c51f";
                    var s = document.getElementsByTagName("script")[0];
                    s.parentNode.insertBefore(hm, s);
                }
            })();
            </script>
    <meta name="description" content="一个分享技术、生活，整理笔记的个人博客">
    
    <link rel="preload" href="/assets/css/0.styles.c5fe4079.css" as="style"><link rel="preload" href="/assets/js/app.f1feaaa3.js" as="script"><link rel="preload" href="/assets/js/2.56bc1612.js" as="script"><link rel="preload" href="/assets/js/7.7ac30410.js" as="script"><link rel="prefetch" href="/assets/js/10.1e88977a.js"><link rel="prefetch" href="/assets/js/11.3149965c.js"><link rel="prefetch" href="/assets/js/12.a751fc6a.js"><link rel="prefetch" href="/assets/js/13.46a65100.js"><link rel="prefetch" href="/assets/js/14.60692bb2.js"><link rel="prefetch" href="/assets/js/15.74268a75.js"><link rel="prefetch" href="/assets/js/16.8a56e86b.js"><link rel="prefetch" href="/assets/js/17.cd4f0314.js"><link rel="prefetch" href="/assets/js/18.e4a559a0.js"><link rel="prefetch" href="/assets/js/19.2812e5f8.js"><link rel="prefetch" href="/assets/js/20.2a8bf95e.js"><link rel="prefetch" href="/assets/js/21.f0e889f9.js"><link rel="prefetch" href="/assets/js/22.be080c8c.js"><link rel="prefetch" href="/assets/js/23.f568ebff.js"><link rel="prefetch" href="/assets/js/24.c8946e24.js"><link rel="prefetch" href="/assets/js/25.13080108.js"><link rel="prefetch" href="/assets/js/26.4b7b31f3.js"><link rel="prefetch" href="/assets/js/27.d7d7f81f.js"><link rel="prefetch" href="/assets/js/28.faeb5048.js"><link rel="prefetch" href="/assets/js/29.1d40cd69.js"><link rel="prefetch" href="/assets/js/3.113aa5f9.js"><link rel="prefetch" href="/assets/js/30.f2d5999d.js"><link rel="prefetch" href="/assets/js/31.3919f392.js"><link rel="prefetch" href="/assets/js/32.d0cb9d84.js"><link rel="prefetch" href="/assets/js/33.67c73b82.js"><link rel="prefetch" href="/assets/js/34.7c153175.js"><link rel="prefetch" href="/assets/js/35.fb1bdca9.js"><link rel="prefetch" href="/assets/js/36.6b4bc7a1.js"><link rel="prefetch" href="/assets/js/4.a7fbcc6d.js"><link rel="prefetch" href="/assets/js/5.cbcdf0da.js"><link rel="prefetch" href="/assets/js/6.eedbdea5.js"><link rel="prefetch" href="/assets/js/8.444ebd43.js"><link rel="prefetch" href="/assets/js/9.ecf5a0cc.js">
    <link rel="stylesheet" href="/assets/css/0.styles.c5fe4079.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo.png" alt="秋澪冬安" class="logo"> <span class="site-name can-hide">秋澪冬安</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">主页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="收藏" class="dropdown-title"><a href="/pages/87b1e9/" class="link-title">收藏</a> <span class="title" style="display:none;">收藏</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/87b1e9/" class="nav-link">网站</a></li><li class="dropdown-item"><!----> <a href="/pages/c47f0e/" class="nav-link">资源</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="个人建站" class="dropdown-title"><!----> <span class="title" style="display:;">个人建站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://billsaul.gitee.io/genshinrecord" target="_blank" rel="noopener noreferrer" class="nav-link external">
  原神祈愿记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">关于</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/assets/img/head portrait.webp"> <div class="blogger-info"><h3>秋澪冬安</h3> <span></span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">主页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="收藏" class="dropdown-title"><a href="/pages/87b1e9/" class="link-title">收藏</a> <span class="title" style="display:none;">收藏</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/87b1e9/" class="nav-link">网站</a></li><li class="dropdown-item"><!----> <a href="/pages/c47f0e/" class="nav-link">资源</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="个人建站" class="dropdown-title"><!----> <span class="title" style="display:;">个人建站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://billsaul.gitee.io/genshinrecord" target="_blank" rel="noopener noreferrer" class="nav-link external">
  原神祈愿记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">关于</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>瞎折腾</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/026ea6/" aria-current="page" class="active sidebar-link">CSS Flexbox布局教程 [搬运]</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#开启-flexbox-布局" class="sidebar-link">开启 Flexbox 布局</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#对齐方式" class="sidebar-link">对齐方式</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#子元素覆盖对齐方式" class="sidebar-link">子元素覆盖对齐方式</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#排列方式" class="sidebar-link">排列方式</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#空间占比" class="sidebar-link">空间占比</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#flex-basis" class="sidebar-link">Flex-basis</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#缩放" class="sidebar-link">缩放</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#再说-flex-属性" class="sidebar-link">再说 flex 属性</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#折行" class="sidebar-link">折行</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#嵌套的-flex-容器的问题" class="sidebar-link">嵌套的 flex 容器的问题</a></li><li class="sidebar-sub-header level2"><a href="/pages/026ea6/#总结" class="sidebar-link">总结</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>树莓派4B</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/pages/1922ab/" class="sidebar-link">genshin-record项目文档</a></li><li><a href="/pages/4568fc/" class="sidebar-link">Windows配置Java环境变量</a></li><li><a href="/pages/c242c9/" class="sidebar-link">✨✨博客站点迁移提示✨✨</a></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-1baff76c><div class="articleInfo" data-v-1baff76c><ul class="breadcrumbs" data-v-1baff76c><li data-v-1baff76c><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-1baff76c></a></li> <li data-v-1baff76c><a href="/categories/?category=%E5%8D%9A%E5%AE%A2" title="分类" data-v-1baff76c>博客</a></li><li data-v-1baff76c><a href="/categories/?category=%E5%89%8D%E7%AB%AF" title="分类" data-v-1baff76c>前端</a></li></ul> <div class="info" data-v-1baff76c><!----> <div title="创建时间" class="date iconfont icon-riqi" data-v-1baff76c><a href="javascript:;" data-v-1baff76c>2020-11-07</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">CSS Flexbox布局教程 [搬运]<span class="title-tag">转载</span></h1> <!----> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">提示</p> <p>搬运自博客 <a href="https://zxuqian.cn/" target="_blank" rel="noopener noreferrer">峰华前端工程师<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br>
原帖地址：<a href="https://zxuqian.cn/css-flex-box-layout/" target="_blank" rel="noopener noreferrer">https://zxuqian.cn/css-flex-box-layout/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <div class="custom-block danger"><p class="custom-block-title">迁站提醒</p> <p>本博客已迁移至新域名<a href="https://www.meowpass.com" target="_blank" rel="noopener noreferrer">www.meowpass.com<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，本域名下的博客不再更新，但不会删除，欢迎访问新域名🎉🎉</p></div> <p>在 CSS flexbox 布局出现以前，如果要控制 HTML 元素的布局，要用到很多种奇葩的方式。在水平方向上得用<code>float</code>控制左右对齐，稍一不注意，就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了：要么手动计算高度然后算出中心点，要么用 <code>line-height</code> 和 <code>height</code> 的结合，要么用十之八九不生效的 <code>vertical-align</code> 属性等等等等。自从 flex-box 出现以后，一切似乎就豁然开朗了，水平垂直各种花式对齐，空间分配由你做主。当然，要用好它，用对它也不是一件容易的事，今天就给你说说 flex-box 布局，看完之后你也能熟练的运用它！（博客中的示例都是真实的 HTML 代码，可以使用 chrome 开发者工具查看属性。(此文为了演示某些 flex 示例，在小屏幕下会有横向滚动条)</p> <p>2 分钟视频入门版：<a href="https://www.bilibili.com/video/BV1P7411m7Nu/" target="_blank" rel="noopener noreferrer">2 分钟掌握 CSS Grid 布局<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="开启-flexbox-布局"><a href="#开启-flexbox-布局" class="header-anchor">#</a> 开启 Flexbox 布局</h2> <p>假设有下边这么一个 html 结构：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flex 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flex 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flex 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>一个<code>div</code> 容器包含了三个 <code>div</code> 子元素，按照默认的布局方式进行排列。因为 <code>div</code> 是块级元素，每个 <code>div</code> 占了整个一行的空间：
</p><div class="flex"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <p>如果要开启容器的 flex 布局，只需要在 css 里边给 <code>.flex</code> 设置 <code>display: flex</code> 属性，同时为了演示效果，我给它加上了 100px 的高度：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div> <p>可以看到里边的三个元素自动变成了一行，因为 flex 默认是按行进行排列的。Flexbox 布局是一维布局方式，要么按行排列，要么按列排列。</p> <h2 id="对齐方式"><a href="#对齐方式" class="header-anchor">#</a> 对齐方式</h2> <p>Flex 布局有一个隐式的坐标空间，水平方向有一条主轴(main-axis)，垂直方向上有一条交叉轴(cross-axis)：
</p><div class="pageimg" style="text-align:center;"><img src="" alt="图片"></div><p></p> <h3 id="justify-content"><a href="#justify-content" class="header-anchor">#</a> justify-content</h3> <p>控制主轴（即水平方向）对齐方式使用<code>justify-content</code>属性，它有下边几种对齐方式：</p> <h4 id="flex-start"><a href="#flex-start" class="header-anchor">#</a> flex-start</h4> <p><code>flex-start</code> 是默认值，如果是从左到右的文字阅读习惯(LTR)，就是靠左对齐。因为默认的对齐方式，所以跟上边的例子没有什么区别：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
</code></pre></div><div class="flex" style="display:flex;justify-content:flex-start;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div> <h4 id="center"><a href="#center" class="header-anchor">#</a> center</h4> <p>居中对齐，此时整个 flex 容器被居中到了页面中间：
</p><div class="flex" style="display:flex;justify-content:center;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="flex-end"><a href="#flex-end" class="header-anchor">#</a> flex-end</h4> <p>靠右对齐：
</p><div class="flex" style="display:flex;justify-content:flex-end;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="space-between"><a href="#space-between" class="header-anchor">#</a> space-between</h4> <p>两端对齐，这种对齐方式是第一个和最后一个元素贴边，中间的元素平分剩余的空间：
</p><div class="flex" style="display:flex;justify-content:space-between;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="space-evenly"><a href="#space-evenly" class="header-anchor">#</a> space-evenly</h4> <p>分散对齐，所有的元素都平分空间：
</p><div class="flex" style="display:flex;justify-content:space-evenly;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="space-around"><a href="#space-around" class="header-anchor">#</a> space-around</h4> <p>跟<code>space-evenly</code>类似，但是左右两边的留白为平分空间的 1/2.
</p><div class="flex" style="display:flex;justify-content:space-around;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h3 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h3> <p>控制交叉轴方向（即垂直方向）上的对齐方式使用<code>align-items</code>属性，有下边几种对齐方式：</p> <h4 id="stretch"><a href="#stretch" class="header-anchor">#</a> stretch</h4> <p><code>stretch</code> 是 <code>align-items</code> 的默认值，它会自动把子元素拉伸成容器的高度，所以之前的例子里子元素在垂直方向上都占满了容器，只要改变容器的<code>align-items</code>的值，它就会变成内容的高度。<code>stretch</code> 对齐效果如下：
</p><div class="flex" style="display:flex;align-items:stretch;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="flex-start-2"><a href="#flex-start-2" class="header-anchor">#</a> flex-start</h4> <p>靠上对齐，在交叉轴开始的最上方，可以看到子元素不再占满容器高度：
</p><div class="flex" style="display:flex;align-items:flex-start;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="center-2"><a href="#center-2" class="header-anchor">#</a> center</h4> <p>居中对齐：
</p><div class="flex" style="display:flex;align-items:center;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="flex-end-2"><a href="#flex-end-2" class="header-anchor">#</a> flex-end</h4> <p>靠下对齐：
</p><div class="flex" style="display:flex;align-items:flex-end;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h4 id="baseline"><a href="#baseline" class="header-anchor">#</a> baseline</h4> <p>基线对齐，如果子元素文字尺寸和行高不同，则子元素会按照文字的基线进行对齐：</p> <div class="language- extra-class"><pre class="language-text"><code>.flex2 {
  font-size: 24px;
}
</code></pre></div><div class="flex" style="display:flex;align-items:baseline;"><div class="flex1">Flex 1</div> <div class="flex2" style="font-size:24px;">Flex 2</div> <div class="flex3">Flex 3</div></div> <p>如果是 <code>flex-start</code> 对齐方式：
</p><div class="flex" style="display:flex;align-items:flex-start;"><div class="flex1">Flex 1</div> <div class="flex2" style="font-size:24px;">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <h3 id="align-content"><a href="#align-content" class="header-anchor">#</a> align-content</h3> <p>本小节在下边讲到折行时再介绍</p> <h2 id="子元素覆盖对齐方式"><a href="#子元素覆盖对齐方式" class="header-anchor">#</a> 子元素覆盖对齐方式</h2> <p>子元素可以通过设置 <code>align-self</code> 来控制自己在交叉轴上的对齐方式，例如把 <code>.flex3</code> 子元素在垂直方向上靠下对齐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex3</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;align-items:flex-start;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3" style="align-self:flex-end;">Flex 3</div></div> <p>在水平方向上控制子元素对齐并没有<code>justify-self</code>属性，而是使用<code>margin</code>属性，通过把左或右边距设置为<code>auto</code>来控制水平对齐，比如把 <code>flex3</code> 放到最右边：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex3</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3" style="margin-left:auto;">Flex 3</div></div> <h2 id="排列方式"><a href="#排列方式" class="header-anchor">#</a> 排列方式</h2> <p>flex 支持按行排布，也支持按列排布。按列排布时，主轴和交叉轴换了方向，但是 align-items 和 justify-content 控制的轴线不变，即 <code>align-items</code> 还是控制交叉轴，<code>justify-content</code> 控制主轴：
</p><div class="pageimg" style="text-align:center;"><img src="" alt="图片"></div><p></p> <p>所以说，在水平方向上对齐变成了使用<code>align-items</code>，垂直方向则用<code>justify-content</code>。<br>
要使 flex 按列排布，只需要设置：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
</code></pre></div><p>来看几个例子：</p> <p><strong>水平居中对齐</strong></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;flex-direction:column;align-items:center;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div> <p><strong>垂直居中对齐</strong></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;flex-direction:column;justify-content:center;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div> <p>另外 flex 布局也可以支持反向按行和列布局，相当于按容器中心线进行 180 度翻转：<br> <strong>row-reverse</strong></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;flex-direction:row-reverse;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div> <p><strong>column-reverse</strong>
列模式下会垂直翻转：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;flex-direction:column-reverse;"><div class="flex1">Flex 1</div> <div class="flex2">Flex 2</div> <div class="flex3">Flex 3</div></div> <h2 id="空间占比"><a href="#空间占比" class="header-anchor">#</a> 空间占比</h2> <p>子元素可以通过设置<code>flex</code>属性来调整空间的占比，例如让 <code>flex2</code> 在水平方向上占据其他子元素的 2 倍大小，可以设置：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex1,
.flex3</span> <span class="token punctuation">{</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.flex2</span> <span class="token punctuation">{</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1" style="flex:1;">Flex 1</div> <div class="flex2" style="flex:2;">Flex 2</div> <div class="flex3" style="flex:1;">Flex 3</div></div> <h2 id="flex-basis"><a href="#flex-basis" class="header-anchor">#</a> Flex-basis</h2> <p>在介绍 flex-basis 之前，先讲一个概念 <code>main size</code>，即主轴方向的尺寸，那么，在行排布模式下，也就是水平方向的尺寸，其实就是子元素的宽度，而在列模式下，它是子元素的高度，相对应的也有<code>cross size</code>，即行模式下是子元素的高度，列模式下是宽度。
而<code>flex-basis</code>是用来设置<code>main size</code>的，它的优先级会高于<code>width</code>。<strong>它的默认值是<code>auto</code></strong>，即在行模式下，如果子元素设置了宽度，它就取自这个宽度值，没有设置的话，就是内容的宽度。使用 <code>flex-basis</code>，可以同时管理行模式下的宽度和列模式下的高度。</p> <p>来看一个例子，把之前的子元素改成固定宽度，比如 <code>200px</code>：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这样每个子元素宽度变为了 200px：
</p><div class="flex" style="display:flex;"><div class="flex1" style="flex-basis:200px;">Flex 1</div> <div class="flex2" style="flex-basis:200px;">Flex 2</div> <div class="flex3" style="flex-basis:200px;">Flex 3</div></div><p></p> <p>如果再添加 <code>width</code> 属性，发现并不会生效：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1" style="flex-basis:200px;width:250px;">Flex 1</div> <div class="flex2" style="flex-basis:200px;width:250px;">Flex 2</div> <div class="flex3" style="flex-basis:200px;width:250px;">Flex 3</div></div> <p>但是，可以通过设置 <code>min-width</code>来强制设置最小宽度：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">min-width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1" style="flex-basis:200px;min-width:250px;">Flex 1</div> <div class="flex2" style="flex-basis:200px;min-width:250px;">Flex 2</div> <div class="flex3" style="flex-basis:200px;min-width:250px;">Flex 3</div></div> <p>同理的，在列模式下，<code>flex-basis</code>变成了高度，因为容器高度为 <code>100px</code>，这里把子元素高度设置成了 <code>30px</code> 总计 <code>90px</code> 来效果：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;flex-direction:column;"><div class="flex1" style="flex-basis:30px;">Flex 1</div> <div class="flex2" style="flex-basis:30px;">Flex 2</div> <div class="flex3" style="flex-basis:30px;">Flex 3</div></div> <p>同样的，也可以用<code>min-height</code>来控制最小高度。</p> <h2 id="缩放"><a href="#缩放" class="header-anchor">#</a> 缩放</h2> <p>（后续例子都假设是行模式）之前的小节简单说了一下 flex 子元素空间的占比，这里把缩放单独拿出来是为了说明：除了调整 flex 子元素的增长之外，也可以调整收缩，以及<code>flex</code>属性背后的原理（下一小节）。</p> <h3 id="flex-grow"><a href="#flex-grow" class="header-anchor">#</a> flex-grow</h3> <p>先看一下增长，<code>flex-grow</code>，这个属性是说 flex 容器在有剩余空间的时候，子元素占据剩余空间的占比。例如，给<code>.flex2</code>子元素设置：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex2</span> <span class="token punctuation">{</span>
  <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>其它的元素保持默认的宽度（即内容的宽度，flex-basis 为 auto)，那么 <code>.flex2</code> 就会自动增长并占据整个剩余空间：
</p><div class="flex" style="display:flex;"><div class="flex1">Flex 1</div> <div class="flex2" style="flex-grow:1;">Flex 2</div> <div class="flex3">Flex 3</div></div><p></p> <p>如果把三个元素全部设置成 1，那么所有元素都会自动增长，并各自占据 1/3 的空间：
</p><div class="flex" style="display:flex;"><div class="flex1" style="flex-grow:1;">Flex 1</div> <div class="flex2" style="flex-grow:1;">Flex 2</div> <div class="flex3" style="flex-grow:1;">Flex 3</div></div><p></p> <p>使用 <code>flex-grow</code> 就能够自由的调整元素的空间占比了，非常适合一些浮动的布局。</p> <h3 id="flex-shrink"><a href="#flex-shrink" class="header-anchor">#</a> flex-shrink</h3> <p>子元素的收缩是说：当它们的宽度超过 flex 容器之后，该如何进行收缩。通过 <code>flex-shrink</code> 来设置一个数值，数值越大，收缩程度也越大，比如<code>flex-shrink: 2</code>的元素会比<code>flex-shrink:1</code>收缩的值大 2 倍：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex1,
.flex3</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.flex2</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这里为了方便演示，我把所有的 flex 子元素的 main size (宽度) 都设置成了 600px。在我的显示器下，flex 容器的宽度是 728px，三个子元素总和 1800px，显然超出了容器的宽度，那么根据上边定义的收缩规则，<code>.flex2</code> 将收缩 2 倍于 <code>.flex</code> 和 <code>.flex3</code> 收缩的空间。下边的例子中，<code>.flex1</code> 和 <code>.flex3</code> 的宽度变成了 <code>332px</code>，相比于 <code>600px</code> 收缩了 <code>268px</code>，那么 <code>.flex2</code> 就要收缩 <code>536px (268px * 2)</code> 的宽度，那么它最后就会剩下 <code>64px (600px - 536px)</code> 的宽度：
</p><div class="flex" style="display:flex;"><div class="flex1" style="flex-basis:600px;flex-shrink:1;">Flex 1</div> <div class="flex2" style="flex-basis:600px;flex-shrink:2;">Flex 2</div> <div class="flex3" style="flex-basis:600px;flex-shrink:1;">Flex 3</div></div><p></p> <h2 id="再说-flex-属性"><a href="#再说-flex-属性" class="header-anchor">#</a> 再说 flex 属性</h2> <p>说完<code>flex-grow</code>、<code>flex-shrink</code> 和 <code>flex-basis</code> 之后，再来看一下这个 <code>flex</code> 属性，它其实是前边三个属性的缩写，默认值是 <code>0 1 auto</code>，即不增长，但收缩，收缩比例为 1，flex-basis 为 auto，即取自用户定义的宽度或内容的宽度。</p> <p>flex 的值可以是下边几种：</p> <ul><li>指定一个数字 - 例如<code>flex: 1</code>，就等同于是<code>flex: 1 1 0</code>，即自动缩放，比例为 1，flex-basis 为 0。</li> <li>auto - 等同于<code>flex: 1 1 auto</code>。</li> <li>指定两个数字 - 第一个为<code>flex-grow</code>，第二个，如果是数字则认为是 <code>flex-shrink</code>，如果是宽度，则是<code>flex-basis</code>。</li> <li>指定三个值 - 分别为<code>flex-grow</code>，<code>flex-shrink</code> 和 <code>flex-basis</code>。</li></ul> <p>所以说，通过<code>flex</code>属性可以方便的同时设置<code>flex-grow</code>、<code>flex-shrink</code> 和 <code>flex-basis</code> 这三个值。</p> <h2 id="折行"><a href="#折行" class="header-anchor">#</a> 折行</h2> <p>如果子元素有固定宽度，并且超出了容器的宽度，还不允许收缩的话，那么可以使用<code>flex-wrap</code>属性来让元素进行折行排列，使得每行的元素都不超过容器的宽度。<strong>这里跟 css grid 布局的主要区别是，它无法控制单独控制行、列的占比，比如跨行、夸列，也不能自由定位元素到特定的位置</strong>。下边的示例新增了 2 个元素，一共 5 个，每个元素的 main size 为 300px，然后超出宽度后折行：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;flex-wrap:wrap;"><div class="flex1" style="flex-shrink:0;flex-basis:300px;">Flex 1</div> <div class="flex2" style="flex-shrink:0;flex-basis:300px;">Flex 2</div> <div class="flex3" style="flex-shrink:0;flex-basis:300px;">Flex 3</div> <div class="flex4" style="flex-shrink:0;flex-basis:300px;">Flex 4</div> <div class="flex5" style="flex-shrink:0;flex-basis:300px;">Flex 5</div></div> <h3 id="align-content-2"><a href="#align-content-2" class="header-anchor">#</a> align-content</h3> <p>如果 flex 容器开启了折行，那么两行及以上的内容可以通过<code>align-content</code>属性来控制各行之间在交叉轴上的排列规则，它的取值和 <code>justify-content</code>基本相同，这里演示其中几个，还是使用之前三个元素的 flex 容器，每个容器宽度为 300px，超出后换行：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex-basis</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="center-3"><a href="#center-3" class="header-anchor">#</a> center</h4> <p>垂直居中：
</p><div class="flex" style="display:flex;flex-wrap:wrap;align-content:center;"><div class="flex1" style="flex-basis:300px;">Flex 1</div> <div class="flex2" style="flex-basis:300px;">Flex 2</div> <div class="flex3" style="flex-basis:300px;">Flex 3</div></div><p></p> <h4 id="space-between-2"><a href="#space-between-2" class="header-anchor">#</a> space-between</h4> <p>两端对齐：
</p><div class="flex" style="display:flex;flex-wrap:wrap;align-content:space-between;"><div class="flex1" style="flex-basis:300px;">Flex 1</div> <div class="flex2" style="flex-basis:300px;">Flex 2</div> <div class="flex3" style="flex-basis:300px;">Flex 3</div></div><p></p> <h2 id="嵌套的-flex-容器的问题"><a href="#嵌套的-flex-容器的问题" class="header-anchor">#</a> 嵌套的 flex 容器的问题</h2> <p>如果 HTML 结构复杂，有嵌套的 flex 容器，很有可能会遇到嵌套的 flex 容器并不能自动收缩的问题，即使设置了<code>flex-shrink</code>。比如有下边一个 html 结构：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flex 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flex 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flex 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长长很长很长很长很长很长长很长很长很长很长很长的文本
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>这里给之前的 flex 容器添加了一个新的子元素<code>.flex4</code>，这 4 个子元素都设置成<code>flex: 1</code>来平分空间，但是 <code>.flex4</code> 自己本身也是一个<code>flex</code>布局的容器，里边有一长串文本，我想让它超长之后自动显示省略号，它的 CSS 代码：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.flex &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.flex4</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.flex4 &gt; p</span> <span class="token punctuation">{</span>
  <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1" style="flex:1;">Flex 1</div> <div class="flex2" style="flex:1;">Flex 2</div> <div class="flex3" style="flex:1;">Flex 3</div> <div class="flex4" style="flex:1;display:flex;"><p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
        这是一段长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本
        </p></div></div> <p>可以看到，最后本应该占 1/4 空间的<code>.flex4</code>，因为文本不能换行，直接把 flex 容器撑开了，并且把其他的三个子元素挤成了最小空间，它本应该把文字截短并显示省略号，这是为什么呢？原来，flex 容器的 <code>min-width</code> 属性值为 auto，是由浏览器自行计算的，在这里它取了<code>&lt;p&gt;</code>元素的宽度，使得宽度成为了一整行 <code>&lt;p&gt;</code> 的宽度。那么要解决这个问题，可以把<code>.flex4</code> 这个嵌套 flex 容器的 <code>min-width</code> 改为<code>0</code>，即最小宽度是<code>0</code>，那么就可以正常收缩了：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.flex4</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token property">min-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="flex" style="display:flex;"><div class="flex1" style="flex:1;">Flex 1</div> <div class="flex2" style="flex:1;">Flex 2</div> <div class="flex3" style="flex:1;">Flex 3</div> <div class="flex4" style="flex:1;display:flex;min-width:0;"><p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
        这是一段很长很长很长很长很长很长很长很长很长很长很长很长长很长很长很长很长很长长很长很长很长很长很长的文本
        </p></div></div> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>到这里，整个 flex 布局就介绍完了，还是有不少东西的，但不难。相信通过实例你一定可以掌握它的用法，下边总结一下要点：</p> <ul><li>开启 flex 布局使用<code>display: flex</code>属性。</li> <li>flex 布局有主轴和交叉轴，分别使用<code>justify-content</code>和<code>align-items</code>控制对齐方式。</li> <li>支持按行或列进行排列，使用<code>flex-direction</code>，另外也支持<code>row-reverse</code>和<code>column-reverse</code>反向排列。</li> <li>子元素可以通过<code>flex</code>简写形式，或者<code>flex-grow</code>，<code>flex-shrink</code>，<code>flex-basis</code> 来调整元素的空间占比和缩放。</li> <li>通过<code>flex-wrap</code>可以设置 flex 子元素折行显示。</li> <li>嵌套<code>flex</code>容器的缩放问题。</li></ul> <p>你学会了吗？如果有问题，欢迎通过下方链接参与讨论。</p> <p><a href="https://www.bilibili.com/video/BV1P7411m7Nu/" target="_blank" rel="noopener noreferrer">&gt;&gt; 在 B 站参与讨论<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div></div> <!----> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=CSS" title="标签">#CSS</a><a href="/tags/?tag=%E5%89%8D%E7%AB%AF" title="标签">#前端</a></div> <div class="last-updated"><span class="prefix">上次编辑:</span> <span class="time">2022/01/03, 12:49:27</span></div></div> <div class="page-nav-wapper"><!----> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/cc59bd/" class="prev">使用iPerf3测内网的网速</a></span> <span class="next"><a href="/pages/08260b/">从零开始的树莓派4B</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/c242c9/"><div>
            ✨✨博客站点迁移提示✨✨
            <!----></div></a> <span class="date">04-24</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/d38aff/"><div>
            VSCode生成头部注释
            <!----></div></a> <span class="date">01-03</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/f002e9/"><div>
            VSCode配置文件配置项
            <!----></div></a> <span class="date">12-22</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="https://github.com/BillSaul" title="GitHub" target="_blank" class="iconfont icon-github-fill-round"></a><a href="mailto:billsaul@github.email.cn" title="发邮件" target="_blank" class="iconfont icon-email"></a><a href="https://gitee.com/billsaul" title="Gitee" target="_blank" class="iconfont icon-gitee-fill-round"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2020-2022
    <span>秋澪冬安 | Gitee BillSaul</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.f1feaaa3.js" defer></script><script src="/assets/js/2.56bc1612.js" defer></script><script src="/assets/js/7.7ac30410.js" defer></script>
  </body>
</html>
